import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomModalAnimatable from 'src/components/modal/CustomModalAnimatable'
import CustomButton from '../button/CustomButton'

export default class PromptModal extends React.PureComponent {
  confirmed = false

  onCancel = () => {
    this.confirmed = false
    this.props.onCancel && this.props.onCancel()
  }

  onConfirm = () => {
    this.confirmed = true
    this.props.onConfirm && this.props.onConfirm()
  }

  onModalHideTemp = () => {
    this.props.onModalHide && this.props.onModalHide(this.confirmed)
  }

  render () {
    const { confirmText, cancelText, titleText, contentText } = this.props.config
    return (
      <CustomModalAnimatable
        {...this.props}
        onCancel={this.onCancel}
        onModalHideTemp={this.onModalHideTemp}>
        <View style={styles.container}>
          <Text style={styles.titleLabel}>{titleText || '温馨提示'}</Text>
          <Text style={styles.tipContent}>{contentText || ''}</Text>
          <CustomButton style={styles.cancelBtnView} onPress={this.onCancel}>
            <Text style={styles.cancelText}>{cancelText || '取消'}</Text>
          </CustomButton>
          <CustomButton style={styles.confirmView} onPress={this.onConfirm}>
            <Text style={styles.confirmText}>{confirmText || '确定'}</Text>
          </CustomButton>
        </View>
      </CustomModalAnimatable>
    )
  }
}

PromptModal.propTypes = {
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  onModalHide: PropTypes.func,
  visible: PropTypes.bool,
  config: PropTypes.object.isRequired
}
PromptModal.defaultProps = {
  config: {}
}

const styles = StyleSheet.create({
  container: {
    width: ScaleS(363),
    marginBottom: ScaleS(6),
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignSelf: 'center',
    alignItems: 'center'
  },
  titleLabel: {
    color: '#444444',
    fontSize: ScaleT(33),
    fontWeight: '300',
    marginTop: ScaleS(27)
  },
  tipContent: {
    color: '#444444',
    fontSize: ScaleT(18),
    fontWeight: '500',
    marginTop: ScaleS(52)
  },
  cancelBtnView: {
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(216,216,216,0.5)',
    borderRadius: ScaleS(10),
    marginTop: ScaleS(55)
  },
  cancelText: {
    color: '#999999',
    fontSize: ScaleT(15),
    fontWeight: '600'
  },
  confirmView: {
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
    borderRadius: ScaleS(10),
    marginTop: ScaleS(12),
    marginBottom: ScaleS(26)
  },
  confirmText: {
    color: '#FFFFFF',
    fontSize: ScaleT(15),
    fontWeight: '600'
  }
})
